<template>
  <uni-nav-bar title="新增车友" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package" style="padding:0rpx 20rpx">
    <view class="space-between">
      <view>车友姓名</view>
      <input class="uni-input" placeholder="请输入车友姓名" v-model="name" />
    </view>
    <view class="space-between">
      <view>手机号</view>
      <input class="uni-input" maxlength="11" placeholder="请输入车友手机号" v-model="tel" />
    </view>
    <view class="space-between" @click="openPlatePicker">
      <view>车牌号</view>
      <view>
        <text :style="{ color: numberplate ? '#333' : '#808080' }">
          {{ numberplate ? numberplate : '请输入车牌号' }}
        </text>
        <uni-icons type="right" color="#999"></uni-icons>
      </view>
    </view>
    <view class="space-between" @click="navTo('administrator/keyaccount/priceList?type=drive')">
      <view>价格组</view>
      <text
        :style="{ color: priceAll.name ? '#333' : '#808080' }">{{ priceAll.name ? priceAll.name : '请选择价格组' }}</text>
    </view>
  </view>
  <view class="add" @click="submit()">确定</view>
  <!-- 车牌弹框 -->
  <VehiclePlatePad v-if="isShowPlatePad" @cancel="isShowPlatePad = false" @confirm="confirmPlate" />
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import VehiclePlatePad from '@c/common/VehiclePlatePads.vue';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import { onShow, onUnload } from '@dcloudio/uni-app';
  import { toPublish } from '@mqtt';
  import { ref } from 'vue';
  import { information } from '@/stores/administrator';
  const TeamInfo = information();
  /**
    * 添加PC端账户
    * @param {Null} isShowPlatePad  添加车牌弹框
    * @param {String} name  车友姓名
    * @param {String} tel  手机号
    * @param {String} numberplate  车牌号
    * @param {Object} priceAll  价格组
    * @return
    */
  const isShowPlatePad = ref(false); //添加车牌弹框
  const numberplate = ref(''); //车牌号
  const priceAll = ref() //价格组

  const name = ref('')
  const tel = ref('')
  onShow(() => {
    priceAll.value = uni.getStorageSync('price_group')
    console.log(JSON.stringify(uni.getStorageSync('price_group')))
  })
  onUnload(() => {
    uni.removeStorageSync('price_group');
  })
  /**
   * 打开/关闭车牌弹框
   */
  function openPlatePicker() {
    isShowPlatePad.value = true
  }
  function confirmPlate(plate : string) {
    numberplate.value = plate;
    isShowPlatePad.value = false;
  }
  function validatePhone() {
    const rule = /^1[3-9]\d{9}$/;
    return rule.test(tel.value);
  }
  function submit() {
    if (!name.value) {
      errorToast('请输入车友姓名')
      return
    }
    if (!tel.value) {
      errorToast('请输入车友手机号')
      return
    } else if (!validatePhone()) {
      errorToast('请输入有效的手机号码')
      return
    }
    if (!numberplate.value) {
      errorToast('请输入车牌号')
      return
    }
    if (!priceAll.value) {
      errorToast('请选择价格组')
      return
    }
    submit_s()
  }
  /**
    * 新增车友
    * @param {number} customers_id  大客户ID
    * @param {string} name  车友姓名
    * @param {string} mobile  手机号
    * @param {string} cart_code  车牌号
    * @param {number} price_group_id  价格组
    * @return
    */
  function submit_s() {
    showLoading()
    const payload = {
      customers_id: Number(TeamInfo.KeyCustom.id),
      name: name.value,
      mobile: tel.value,
      price_group_id: Number(priceAll.value.id),
      cart_code: numberplate.value
    };
    toPublish(
      'control/addCustomersDriver',
      payload,
      (obj : any) => {
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          navBack()
        } else {
          errorToast(msg)
        }
      }
    );
  }
</script>

<style scoped lang="less">
  .add {
    width: 480rpx;
    height: 100rpx;
    background: linear-gradient(-10deg, #2C96F9, #1B91FF);
    border-radius: 5px;
    text-align: center;
    line-height: 100rpx;
    color: #fff;
    margin: 60rpx auto 20rpx;
    font-size: 32rpx;
  }

  .space-between:nth-last-child(1) {
    border: 0px;
  }

  .space-between {
    padding: 30rpx 0px;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
  }

  input {
    text-align: right;
  }
</style>